<!--
 * @Description: 服务轮播图
 * @Author: DXV-RGWU-TUFH-RFCY-IEGMYY
 * @Date: 2023-08-19 14:36:30
 * @LastEditTime: 2023-08-31 14:29:20
 * @LastEditors: DXV-RGWU-TUFH-RFCY-IEGMYY
-->

<template>
  <div class="diy-service-banner">
    <div class="tab-info rel">
      <img class="banner-img" :src="banner" />
      <div class="tab-list flex-warp fill-base radius abs">
        <div
          class="tab-item flex-center c-title rel"
          v-for="(item, index) in tabList"
          :key="index"
        >
          {{ item.title }}
          <div
            class="tab-item-sanjao abs"
            :style="{ right: item.title.length === 3 ? '-8px' : '' }"
            v-if="item.is_sign"
          >
            <i class="up iconfont icon-up-fill rel"></i>
            <i class="down iconfont icon-down-fill rel"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'serviceBanner',
  props: {
    o: Object,
    primaryColor: String
  },
  data () {
    return {
      banner:
        'https://lbqnyv3.migugu.com/image/666/23/05/coLq1uUiDPgsYSUJrcX6qQfMGt87Cg7K.jpg',
      tabList: [{
        title: '全部',
        sort: 'top desc'
      }, {
        title: '价格',
        sort: 'price',
        sign: 0,
        is_sign: 1
      }, {
        title: '销量',
        sort: 'total_sale',
        sign: 0,
        is_sign: 1
      }, {
        title: '好评度',
        sort: 'star',
        sign: 0,
        is_sign: 1
      }]
    }
  }
}
</script>
<style lang="scss" scoped>
.diy-service-banner {
  .tab-info {
    width: 100%;
    height: 232px;
    .banner-img {
      width: 100%;
      height: 200px;
      display: block;
      object-fit: cover;
    }

    .tab-list {
      width: calc(100% - 16px);
      margin-left: 8px;
      margin-right: 8px;
      bottom: 0;
      padding-right: 20px;
      z-index: 9;
      .tab-item {
        width: 25%;
        height: 40px;
        padding: 0 10px;
        .tab-item-sanjao {
          top: 6px;
          right: -3px;
          width: 15px;
          height: 25px;
          -webkit-transform: scale(0.6);
          transform: scale(0.6);
          .iconfont {
            font-size: 10px;
            color: #ccc;
          }

          .up {
            top: 0;
            left: 0;
          }

          .down {
            bottom: 12px;
            left: 0;
          }
        }
      }
    }
  }
}
</style>
